<template>
  <div id="list-content" class="list-content">
    <div ref="mescroll" class="mescroll">
      <div>
        <!--内容...-->
        <ul class="list-box">
          <li v-for="(item, index) in dataList" :key="item.id" class="li-item" @click="goDetail(item)">
            <p class="item-title">{{item.title}}</p>
            <img class="item-img" v-if="item.top" :src="item.author.avatar_url" alt="">
            <div class="item-bottom">
              <div class="bottom-l">
                {{item.createTime | formatTime}}{{ `发布 / ${item.readNum}浏览 / ${item.replyNum}回复` }}
              </div>
              <div class="bottom-r">
                <span class="red">{{item.createTime | diffTime}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
import MeScroll from 'mescroll.js'

export default {
  name: "art-list",
  props: {
    dataList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      limit: 20, //每页数据条数,默认10
      mescroll: null, //mescroll实例对象
      scrollNum: 111,
    }
  },
  methods: {
    initScroll() {
      let el = this.$refs.mescroll
      this.mescroll = new MeScroll(el, {
        down: {
          auto: false,
          callback: this.downCb,
          // htmlContent: '<div>正在加载</div>',
        },
        up: {
          callback: this.upCb,
          // isBounce: false,
          toTop: {
            warpId: 'list-content',
            src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552564535026&di=292077a2de481aa6984d76a175a5a481&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F48%2F04%2F13574410533dd07.jpg",
            offset: 1000, //列表滚动1000px才显示回到顶部按钮
          },
          htmlNodata: '<p class="upwarp-nodata">-- 没有更多信息了 --</p>',
          empty: {
            warpId: el,
            // icon: "./static/mescroll/mescroll-empty.png",
            tip: "暂无相关数据~", //提示
          }
        }
      })
    },
    downCb() {
      this.$emit('down-cb', this.mescroll)
    },
    upCb(page) {
      this.$emit('up-cb', page, this.mescroll)
    },
    goDetail({id}) {
      // console.log(this.$route.meta)
      if (this.$route.meta.isQue) {
        this.$router.push({path: `/que-detail/${id}`})
      } else {
        this.$router.push({path: `/notice-detail/${id}`})
      }
    }
  },
  mounted() {
    // this.initScroll()
  },
  activated() {
    if (this.mescroll) {
      // this.routerEnter()
      this.mescroll.scrollTo(this.scrollNum, 0)
      this.mescroll.setBounce(false)
    }
  },
  deactivated() {
    if (this.mescroll) {
      this.scrollNum = this.mescroll.preScrollY
      this.mescroll.setBounce(true)
    }
  }
}
</script>

<style lang="less">
.list-content {
  position: relative;
  height: 100%;
}

.mescroll {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
}

.list-box {
  .li-item {
    position: relative;
    min-height: 180px;
    margin-top: 20px;
    padding: 20px 30px 50px;
    background-color: #fff;

    .item-title {
      margin: 20px 0;
      font-size: 32px;
      line-height: 1.2;
    }

    .item-img {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }

    .item-bottom {
      position: absolute;
      bottom: 15px;
      left: 0;
      width: 100%;
      height: 32px;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .bottom-l {
        color: #6699FF;
        font-size: 24px;
      }

      .bottom-r {

      }
    }
  }
}

</style>
